<template>
	<view class="bacl" :style="{height:heights+'px'}">
		<view class="content" :style="'padding-top:'+menuButtonInfo.top+'px' ">
			<view class="topnav" :style="'height:'+menuButtonInfo.height+'px' ">
				<view class="sign" style="color: #fff;">
					<div @click="goDq" style="display: flex; align-items: center;">
	<div> <uni-icons type="location" color="#fff" size="22"></uni-icons></div>
						<div>{{cityName}}</div>
					
					</div>
				</view>
				<view class="my-text" :style="{color : colorText}">
					{{textinfo}}
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	export default {
		props: ['cityName'],
		name: "z-nav-bar",
		data() {
			return {
				menuButtonInfo: menuButtonInfo, //右侧胶囊详细信息
				textinfo: '首页',
				colorText: '#fff',
				heights: '',

			};
		},
		onReady() {
			this.eee()
		},
		onLoad() {
			// this.getCurrentCity()
		},
		methods: {
			getCurrentCity() {
				//获取城市
				let that = this
				// 实例化腾讯API核心类
				let qqmapsdk = new QQMapWX({
					key: this.QQMapWXKey
				});

				//如果本地没有存储就通过uni.getLocation获取当前位置的经纬度
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						uni.setStorageSync('latitude', res.latitude)
						uni.setStorageSync('longitude', res.longitude)
						// 通过经纬度获取当前城市信息
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: uni.getStorageSync('latitude'),
								longitude: uni.getStorageSync('longitude')
							},
							success: function(res1) {
								console.log(res1, 'ress1s1s1s1s1s11s')
								that.cityName = res1.result.ad_info.city;
								uni.setStorageSync('cityName', res1.result.ad_info.city)
							},
							fail: function(res) {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
						})
					},
					fail: function() {
						uni.showToast({
							title: "当前位置信息获取失败",
							icon: 'none'
						})
					}

				})

			},

			eee() {
				this.heights = this.menuButtonInfo.top + this.menuButtonInfo.height

				if (this.titleColor == '#000') {
					this.colorText = '#000'
				} else {
					this.colorText = this.titleColor
				}
				console.log(this.textinfo, this.colorText);

			},
			totops() {
				// uni.navigateBack()
			},
			goDq() {
				uni.navigateTo({
					url: `/pages/ciitys/cityList`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0);
	}

	.topnav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
	}

	.bacl {
		background-color: #034096;
		padding-bottom: 20rpx;

	}

	.my-text {
		font-size: 36rpx;
		font-weight: 500;
		position: absolute;
		left: calc(50% - 40rpx);
		// color: #000;
	}
</style>